// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
import { Controller, controller } from "./controller";

const { ccclass, property } = cc._decorator;

const DISTANCE = 50;
const LINES = 10;
const COLORS = [
    cc.color(200, 50, 50),
    cc.color(50, 200, 50),
    cc.color(50, 50, 200),
    cc.color(180, 50, 180),
    cc.color(180, 50, 180)
]

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    layout: cc.Node = null;

    @property(cc.EditBox)
    edit_x: cc.EditBox = null;

    @property(cc.EditBox)
    edit_y: cc.EditBox = null;

    @property(cc.Button)
    gen_layout: cc.Button = null;

    @property(cc.Button)
    gen_button: cc.Button = null;

    @property(cc.Node)
    play_node: cc.Node = null;

    @property(cc.Button)
    play_button: cc.Button = null;

    node_map: cc.Node[][];
    controller: Controller;
    on_play_action: boolean;

    onLoad() {
        this.controller = controller;
    }

    start() {
        this.gen_layout.node.on("click", this.onClickGenLayout, this);
        this.gen_button.node.on("click", this.onClickGenButton, this);
        let play_button = this.play_button.node;
        play_button.on(cc.Node.EventType.TOUCH_START, this.onTouchPlayBegan, this);
        play_button.on(cc.Node.EventType.TOUCH_END, this.onTouchPlayCancel, this);
        play_button.on(cc.Node.EventType.MOUSE_ENTER, this.onTouchPlayEnter, this);
        play_button.on(cc.Node.EventType.MOUSE_LEAVE, this.onTouchPlayLevel, this);
    }

    playNodeTween() {
        if (this.on_play_action) return;
        this.play_node.stopAllActions();
        this.on_play_action = true;
        let self = this;
        cc.tween(this.play_node)
            .to(5 / 60, { scale: 0.95 })
            .to(5 / 60, { scale: 1.05 })
            .to(5 / 60, { scale: 0.95 })
            .to(5 / 60, { scale: 1.05 })
            .call(() => {
                self && (self.on_play_action = false);
            })
            .start()
    }

    onTouchPlayBegan() {
        console.log("start")
        let bg = this.play_button.node.getChildByName("Background")
        bg.color = cc.color(127, 127, 127);
        this.playNodeTween();
    }

    onTouchPlayCancel() {
        console.log("end")
        let bg = this.play_button.node.getChildByName("Background")
        bg.color = cc.color(255, 255, 255);
        this.playNodeTween();
    }

    onTouchPlayEnter() {
        //@ts-ignore
        if (this.play_button._pressed) {
            this.onTouchPlayBegan();
        }
    }

    onTouchPlayLevel() {
        //@ts-ignore
        if (this.play_button._pressed) {
            this.onTouchPlayCancel();
        }
    }

    // update (dt) {}

    initTiles() {
        var self = this;
        self.layout.removeAllChildren();
        this.node_map = Array.apply(null, { length: LINES }).map(() => {
            return new Array(LINES);
        })
        // console.log(this.nodeMap);
        for (let i = 0; i < LINES; i++) {
            for (let j = 0; j < LINES; j++) {
                cc.resources.load("prefabs/tile", cc.Prefab, function (err, prefab) {
                    if (cc.isValid(self.layout)) {
                        let node = cc.instantiate(prefab as cc.Prefab);
                        self.layout.addChild(node);
                        self.node_map[i][j] = node;
                        self.configTiles(i, j, self)
                    }
                });
            }
        }
    }

    configTiles(i: number, j: number, self: typeof this) {
        let node = self.node_map[i][j];
        node.x = DISTANCE * i - DISTANCE * LINES / 2 + DISTANCE / 2;
        node.y = DISTANCE * LINES / 2 - DISTANCE * j - DISTANCE / 2;
        let left_color = -1, top_color = -1;
        if (i > 0 && cc.isValid(self.node_map[i - 1][j])) {
            left_color = self.node_map[i - 1][j]["color_idx"];
        }
        if (j > 0 && cc.isValid(self.node_map[i][j - 1])) {
            top_color = self.node_map[i][j - 1]["color_idx"];
        }
        let val_x = Number(self.edit_x.string);
        let val_y = Number(self.edit_y.string);
        let color_idx = this.controller.getColorIdx(left_color, top_color, val_x, val_y);
        node["color_idx"] = color_idx;
        node.color = COLORS[color_idx];
    }

    onClickGenLayout() {
        this.initTiles();
    }

    onClickGenButton() {
        if (cc.isValid(this.play_node)) {
            this.play_node.scale = (0.001);
            this.play_node.active = true;
            cc.tween(this.play_node)
                .parallel(
                    cc.tween()
                        .to(8 / 60, { scaleX: 1.1 })
                        .to(3 / 60, { scaleX: 0.95 })
                        .to(3 / 60, { scaleX: 1.05 })
                        .to(3 / 60, { scaleX: 1 }),
                    cc.tween()
                        .to(11 / 60, { scaleY: 1.1 })
                        .to(3 / 60, { scaleY: 0.95 })
                        .to(3 / 60, { scaleY: 1 }),
                    cc.tween()
                        .to(3 / 60, { angle: -3 })
                        .to(6 / 60, { angle: 3 })
                        .to(6 / 60, { angle: -1.5 })
                        .to(2 / 60, { angle: 0 })
                ).start()
        }
    }
}
